<template>
    <div>
        <el-container>
            <el-header>基本信息</el-header>
            <el-main>
                编号：{{aa.hisCarePkgEntity.orderCode}}
                <div>
                    <span v-for="data in aa.pkg_id" :key="data.id"  >{{data.label}}:{{data.allAmount}}   <br/></span>
                </div>
                需支付：{{aa.hisCarePkgEntity.amount}}
            </el-main>
        </el-container>
        <el-container>
            <el-header>支付方式</el-header>
            <el-main>
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item label="现金支付">
                        <el-input v-model="mfyPaymentEntity.xianjin" @blur="zhifu()" style="width: 150px"></el-input>
                    </el-form-item><br>
                    <el-form-item label="支付宝支付">
                        <el-input v-model="mfyPaymentEntity.total_amount" style="width: 150px" readonly ></el-input>
                    </el-form-item><br>
                    <el-form-item>
                        <el-button v-on:click="pay" type="success" round>支付宝支付</el-button>
                    </el-form-item>
                </el-form>
            </el-main>
        </el-container>
    </div>
</template>

<script>

    import Phyment from '../../model/mfy/Phyment.js'
    const phyment = Phyment.getInstance();

    import HisCarePky from '../../model/mfy/HisCarePky.js'
    const hisCarePky = HisCarePky.getInstance();

    export default {
        name: "PaymentHTML",
        props:['id'],
        data(){
            return{
                aa:{},
                mfyPaymentEntity:{
                    out_trade_no:'',
                    subject:'收费发药支付',
                    total_amount:0,
                    body:'收费发药支付',
                    xianjin:0,
                }
            }
        },
        methods:{
            pay:function(){
                phyment.pay(this.mfyPaymentEntity).then((successResponse) => {
                    document.querySelector('body').innerHTML = successResponse.data;//查找到当前页面的body，将后台返回的form替换掉他的内容
                    document.forms[0].submit();  //执行submit表单提交，让页面重定向，跳转到支付宝页面
                }).catch();
            },

            zhifu(){
                if(this.mfyPaymentEntity.xianjin>0 && this.mfyPaymentEntity.xianjin<=this.aa.hisCarePkgEntity.amount ){
                    this.mfyPaymentEntity.total_amount=this.aa.hisCarePkgEntity.amount-this.mfyPaymentEntity.xianjin
                }else{
                    this.mfyPaymentEntity.xianjin=0
                    this.mfyPaymentEntity.total_amount=this.aa.hisCarePkgEntity.amount
                }
            },
            list(){
                hisCarePky.getOne(this.id).then((response)=>{
                    this.aa=response.data.data;
                    this.mfyPaymentEntity.out_trade_no=response.data.data.hisCarePkgEntity.orderCode
                    this.mfyPaymentEntity.total_amount=response.data.data.hisCarePkgEntity.amount
                })
            }
        },
        created() {
            this.list()
        }
    }
</script>

<style scoped>
    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }
</style>
